<!DOCTYPE html>
<!-- saved from url=(0044)https://www.cnblogs.com/dmeck/p/8456034.html -->
<html lang="zh-cn"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Django Media URL的配置 - 博客小站</title>
<link type="text/css" rel="stylesheet" href=/static/css/blog-common.css>
<link id="MainCss" type="text/css" rel="stylesheet" href=/static/css/bundle-summerGarden.css>
<link type="text/css" rel="stylesheet" href=/static/css/412198.css>
<link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href=/static/css/bundle-summerGarden-mobile.css>
<link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/dmeck/rss">
<link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/dmeck/rsd.xml">
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/dmeck/wlwmanifest.xml">
<script async="" src=/static/css/analytics.js></script><script src=/static/css/jquery-2.2.0.min.js></script>
<script type="text/javascript">var currentBlogApp = 'dmeck', cb_enable_mathjax=false;var isLogined=false;</script>
<script src=/static/css/blog-common.jstype="text/javascript"></script>
	<script type="text/javascript" charset="utf8" src=/static/kindeditor/kindeditor-all.js></script>
	<script type="text/javascript" charset="utf8" src=/static/kindeditor/lang/zh-CN.js></script>
	<script type="text/javascript" charset="utf8" src=/static/kindeditor/config.js></script>
</head>
<body>
<a name="top"></a>

<!--done-->
<div id="home">
<div id="header">
	<div id="blogTitle">
	<a id="lnkBlogLogo" href="http://www.cnblogs.com/dmeck/"><img id="blogLogo" src="./css/logo.gif" alt="返回主页"></a>			
		
<!--done-->
<h1>MingSha</h1>
<h2></h2>



		
	</div><!--end: blogTitle 博客的标题和副标题 -->
	<div id="navigator">
		
<ul id="navList">
	
	<li><a id="blog_nav_myhome" class="menu" href="/">首页</a></li>
	<li><a href="/list">博文列表</a></li>
	<li><a id="blog_nav_newpost" class="menu" rel="nofollow" href="/postarticles">发博文</a></li>
	
</ul>


		<div class="blogStats">
			
			<div id="blog_stats">
<!--done-->
随笔- 1&nbsp;
文章- 0&nbsp;
访客- 0&nbsp;
评论- 0&nbsp;
</div>
			
		</div><!--end: blogStats -->
	</div><!--end: navigator 博客导航栏 -->
</div><!--end: header 头部 -->

<div id="main">
	<div id="mainContent">
	<div class="forFlow">
		
<div id="post_detail">
<!--done-->
<div id="topics">
	<div class="post">
		<h1 class="postTitle">
			<a id="cb_post_title_url" class="postTitle2" href="/articles/1">Django Media URL的配置</a>
		</h1>
		<div class="clear"></div>
		<div class="postBody">
			<div id="cnblogs_post_body" class="blogpost-body">
		在Django中经常需要配置图片、视频等表态文件，在配置时较为复杂，这里纪录一下：

一、Settings.py中的配置

在文件尾部加入以下目录，用于存放上传的文件

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
二、在models.py中的配置

在models中写上image字段其中%Y代表年，%m代表月，blank=True代表可以为空。当上传文件时，代表上传到image目录下，以当前年月子目录的文件夹中。
image = models.ImageField(upload_to="image/%Y/%m", blank=True)
image.png

在数据库中会显示为路径如下所示：
image.png
三、在模板中的配置

<img class="mb-3 mr-3" src="{{ MEDIA_URL }}{{ comment.image }}">
其中src中的{{ MEDIA_URL }}会在模板中渲染为第一步中的/media/
image.png
四、配置settings.py中的TEMPLATES

如果您想在模板中使用{{MEDIA_URL}}，请在“模板”的“context_processors”选项中添加django.template.context_processors.media。
通过以上步骤，基本上可以在前端正常渲染出结果了，但还需要给图片添加一个URL以正常显示。

五、在URL.py中的配置

from django.views.static import serve
from project.settings import MEDIA_ROOT
第一行为引入静态文件的serve，第二行为导入工程配置文件中的MEDIA_ROOT
在url中加入：

    url(r'^media/(?P<path>.*)$', serve, {"document_root":MEDIA_ROOT})
即可大功告成。

image.png

作者：MingSha
链接：https://www.jianshu.com/p/7979d3e32495
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


	</div><!--end: forFlow -->
	</div><!--end: mainContent 主体内容容器--><!--end: sideBar 侧边栏容器 -->
	<div class="clear"></div>
	</div><!--end: main -->
	<div class="clear"></div>
	<div id="footer">
		
<!--done-->
Copyright ©2018 Visitors
	</div><!--end: footer -->
</div><!--end: home 自定义的最大容器 -->

<aside class="comments" id="comments">
    <hr>

    <h2><i class="fa fa-comments"></i> 0 条评论</h2>

    
</aside>




<aside class="create-comment" id="create-comment">
    <hr>

    <h2><i class="fa fa-pencil"></i> 评论</h2>

    <form method="post" accept-charset="utf-8" id="form_comment">
        <input type='hidden' name='csrfmiddlewaretoken' value='ZAMn5NiSPIE9Dzeb6oTcY69eAlKtvkRKb9fyefrUobT3K6meFnV2winac2wxxdkE' />
        <input type="hidden" name="news_id" value="">
        <textarea rows="10" name="message" id="comment-body" placeholder="Your Message" style="visibility:hidden;" class="form-control input-lg"></textarea>

        <div class="buttons clearfix">
            <button type="submit" id="btnSubmit" class="btn btn-xlarge btn-clean-one">提交</button>
        </div>
    </form>
</aside>
	<script>
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('textarea[name="message"]', {
					allowFileManager : false
				});
			});
	</script>


</body></html>